import { Typography as ATypography } from 'antd';
import { LinkProps } from 'antd/lib/typography/Link';
import { TextProps } from 'antd/lib/typography/Text';
import cls from 'classnames';
import React from 'react';
import Style from './index.module.less';

const { Text, Link } = ATypography;

export type TextSize = 's1' | 's2' | 's3' | 's4' | 's5' | 's6' | 's7' | 's8';

export interface TypographyProps extends Omit<TextProps, 'type'> {
  /**
   * @value s1 12px
   * @value s2 14px
   * @value s3 16px
   * @value s4 18px
   * @value s5 20px
   * @value s6 24px
   * @value s6 24px
   * @value s7 28px
   * @value s8 32px
   *
   * @default s2
   */
  as?: TextSize;
  color?: string;
  useBold?: boolean;
  className?: string;
  style?: React.CSSProperties;
  link?: LinkProps;
  /**
   * @default default
  */
  type?: 'error' | 'success' | 'info' | 'warning' | 'default' | 'primary';
}

/**
 * 通用文本组件 替代antd的Typography
 * 规范文本样式
*/
export const Typography = React.memo((props: TypographyProps) => {
  const { as, useBold, color, className, style, link, type = 'default', ...rest } = props;
  const getBold = () => {
    return useBold;
  };
  const bold = getBold();
  const resolveType = link ? 'primary' : type

  const commonProps = {
    style: color ? { ...style, color } : style,
    className: cls(
      Style['typography-text'],
      Style[`typography-type-${resolveType}`],
      Style[`typography-text-${as || 's2'}`],
      bold ? Style['typography-text-bold'] : '',
      className || ''
    )
  }

  if (link) {
    return (
      <Link
        {...commonProps}
        {...link}
        children={rest.children}
      />
    );
  }

  return (
    <Text
      {...rest}
      {...commonProps}
    />
  );
});

export default Typography
